<template>
  <baidu-map class="map" :center="{lng: 110.320320, lat: 21.284248}" :zoom="9">
<!--    <div v-for="(item, index) in this.positionList" :key="index">-->
<!--      <bm-marker-->
<!--                 :dragging="true"-->
<!--                 :position="{lng: item.lng, lat: item.lat}"-->
<!--                 @click="infoWindowOpen">-->
<!--        &lt;!&ndash;      <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>&ndash;&gt;-->
<!--        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">-->
<!--          <div style="font-size: 20px">66666</div>-->
<!--        </bm-info-window>-->
<!--      </bm-marker>-->
<!--    </div>-->

<!--    <bm-marker-->
<!--      :dragging="true"-->
<!--      :position="{lng: 116.404, lat: 39.915}"-->
<!--      @click="infoWindowOpen">-->
<!--              &lt;!&ndash;      <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>&ndash;&gt;-->
<!--      <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">-->
<!--        <div style="font-size: 20px">66666</div>-->
<!--      </bm-info-window>-->
<!--    </bm-marker>-->

<!--    <bm-marker-->

<!--      :position="{lng: 110.320320, lat: 21.284248}"-->
<!--      @click="infoWindowOpen">-->
<!--      &lt;!&ndash;      <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>&ndash;&gt;-->
<!--      <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">-->
<!--        <div style="font-size: 20px">ggggggg</div>-->
<!--      </bm-info-window>-->
<!--    </bm-marker>-->

    <!--  比例尺  -->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
    <!--  缩放  -->
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
    <!--  定位  -->
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" />

    <div v-for="(item, index) in this.positionList" :key="index">
      <bm-marker :dragging="true"
                 :position="{lng: item.gpsLongitude, lat: item.gpsLatitude}"
                 @click="infoWindowOpen(index)">
        <bm-info-window :show="item.show" @close="infoWindowClose(index)">
          <div>
            <el-descriptions title="详情" direction="vertical" :column="2" border>
              <el-descriptions-item label="网关名称" :label-style="{'min-width': '120px'}">{{item.gatewayName}}</el-descriptions-item>
              <el-descriptions-item label="网关编号">{{item.gatewayNumber}}</el-descriptions-item>
              <el-descriptions-item label="所属项目">{{item.projectName}}</el-descriptions-item>
              <el-descriptions-item label="是否在线">
                <div v-if="item.serverOnline === '1'">
                  <el-tag type="success">在线</el-tag>
                </div>
                <div v-if="item.serverOnline === '0'">
                  <el-tag type="danger">离线</el-tag>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </bm-info-window>
      </bm-marker>
    </div>
  </baidu-map>
      <!--
    scroll-wheel-zoom是是否可以缩放
    @ready是图加载完后触发事件
    center是位置定位
    zoom是缩放大小限制
    inertial-dragging是允许惯性拖拽
   -->
<!--      <baidu-map-->
<!--        class="bm-view"-->
<!--        :zoom="15"-->
<!--        :center="center"-->
<!--        @ready="mapReady"-->
<!--        :scroll-wheel-zoom="true">-->
<!--        &lt;!&ndash; 定位控件   anchor="BMAP_ANCHOR_BOTTOM_RIGHT"代表放在右下角 &ndash;&gt;-->
<!--        <bm-geolocation-->
<!--          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"-->
<!--          :showAddressBar="true"-->
<!--          :autoLocation="true" />-->
<!--        &lt;!&ndash; 地区检索  keyword：关键字搜索-->
<!--        @searchcomplete：检索完成后的回调函数-->
<!--        auto-viewport：检索结束后是否自动调整地图事业  &ndash;&gt;-->
<!--&lt;!&ndash;        <bm-local-search&ndash;&gt;-->
<!--&lt;!&ndash;          :keyword="keyword"&ndash;&gt;-->
<!--&lt;!&ndash;          :auto-viewport="true"&ndash;&gt;-->
<!--&lt;!&ndash;          class="search" />&ndash;&gt;-->

<!--        &lt;!&ndash; 缩放控件   anchor代表控件停靠位置   anchor="BMAP_ANCHOR_TOP_RIGHT"代表放在右上角&ndash;&gt;-->
<!--        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />-->

<!--        <div>-->
<!--          <bm-marker :position="{lng: 110.320320, lat: 21.284248}" @click="infoWindowOpen">-->
<!--            <bm-label content="1111" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>-->
<!--            <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">我爱北京天安门</bm-info-window>-->
<!--            <div :show="show">123123</div>-->
<!--          </bm-marker>-->
<!--        </div>-->

<!--        <bm-marker :position="{lng: 107.760574, lat: 22.540027}" :dragging="true">-->
<!--          <bm-info-window :show="show" @click="infoWindowOpen">我爱北京天安门</bm-info-window>-->
<!--        </bm-marker>-->

<!--        <bm-marker :position="{lng: 110.327339, lat: 21.280456}" :dragging="true">-->
<!--          <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">我爱北京天安门</bm-info-window>-->
<!--        </bm-marker>-->

<!--      </baidu-map>-->
<!--    </el-card>-->

</template>

<script>
import { selectMapGateway } from '@/api/system/projectMap'
export default {
  name: 'Map',
  data() {
    return {
      positionList: []
    }
  },
  mounted() {
    this.selectMapGateway()
  },
  methods: {
    infoWindowClose(index) {
      this.positionList[index].show = false
    },
    infoWindowOpen(index) {
      this.positionList[index].show = true
    },
    selectMapGateway() {
      this.positionList = []
      selectMapGateway().then(response => {
        console.log(response.data)
        for (let item of response.data) {
          let temp = {}
          temp['gatewayName'] = item.gatewayName
          temp['gatewayNumber'] = item.gatewayNumber
          temp['serverOnline'] = item.serverOnline
          temp['projectName'] = item.projectName
          temp['gpsLatitude'] = item.gpsLatitude
          temp['gpsLongitude'] = item.gpsLongitude
          temp['show'] = false
          this.positionList.push(temp)
        }
      })
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 900px;
}
</style>
